<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的第不知道几个HTML项目</title>
		<style>
			/* 元素选择器 */
			img {
				width: 100px;
			}

			/* 类选择器 */
			.c1 {
				width: 200px;
				height: 300px;

				/* border:边框  solid:实线 */
				/* border: 5px solid red; */
				border-top: 5px solid blue;
				border-bottom: 5px solid green;
				/* transparent:透明 */
				/* border-left: 5px solid transparent; */
				border-left: 5px solid yellow;
				border-right: 5px solid aqua;

				/* 最多4个 */
				/* padding: 5px 10px 20px 50px; */
				padding: 5px;

				/* margin: 20px; */

				/* 块级元素 */
				/* 居中效果 */
				/* display: block;
				margin: 0 auto; */

				/* 垂直对齐 */
				vertical-align: bottom;
			}

			div {
				width: 100px;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<!-- 删除线：表示样式无法生效 -->

		<div></div><img style="width: 100px;" src="img/banner_01.jpg" alt=""></div>
		Aj<img class="c1" src="img/banner_02.jpg" alt="">

		<P>段落1</P>
		<p>段落2</p>
		<span>字段1</span>
		<span>字段2</span>

	</body>
</html>
